<template>
	<view class="page-content">
		<f-navbar title="任务中心" :navbarType="1" :isShowLeft="false"></f-navbar>
		<view class="search-block flex align-center">
			<view class="flex-sub search-input flex align-center" v-if="showSearch">
				<u-input border="none" v-model="listParams.taskCode" maxlength="20" fontSize="24rpx" placeholder="搜索"
					placeholderStyle="font-size: 24rpx;color: #CCCCCC;" confirmType="search" @confirm="searchList" :clearable="true"  @clear="searchClear">
					<template slot="prefix">
						<u-icon name="search" color="#CCCCCC" size="40rpx"></u-icon>
					</template>
				</u-input>
			</view>
			<view class="flex-sub search-input flex align-center justify-center" @click="switchSearch(true)" v-else>
				<u-icon name="search" color="#CCCCCC" size="40rpx"></u-icon>
				<text class="margin-left-xs">搜索</text>
			</view>
			<image class="screen-icon" src="@/static/images/common/screen_icon.png" @click="showScreenModal"></image>
		</view>
		<view class="page-content-main">
			<scrollList :list="list" :loadComplete="loadComplete" @pullUpLoad="pullUpLoad" ref="scrollList">
				<view class="list-block">
					 <!-- @click="goDetail(item)" -->
					<view v-for="(item,index) in list" :key="index" @click="goLink(`./taskDetail?taskId=${item.id}&taskType=${item.taskType}`)">
						<taskItem :item="item">
							<template slot="optionBtn">
								<view style="display: flex;">
									<view class="margin-left" @click.stop="toOrderList(item)">
										<u-button color="linear-gradient(83deg, #48B453 0%, #2C9F79 100%)"
											:customStyle="{width:'171rpx',height:'63rpx',fontSize:'28rpx',borderRadius:'50rpx'}">订单列表
										</u-button>
									</view>
									<view class="margin-left" @click.stop="receiveOrdersTip(item)" v-if="item.taskStatus==1">
										<u-button color="linear-gradient(83deg, #48B453 0%, #2C9F79 100%)"
											:customStyle="{width:'171rpx',height:'63rpx',fontSize:'28rpx',borderRadius:'50rpx'}">确认任务
										</u-button>
									</view>
									<view class="margin-left" @click.stop="startDepart(item)" v-if="item.taskStatus==2">
										<u-button color="linear-gradient(83deg, #48B453 0%, #2C9F79 100%)"
											:customStyle="{width:'171rpx',height:'63rpx',fontSize:'28rpx',borderRadius:'50rpx'}">开始出发
										</u-button>
									</view>
								</view>
							</template>
						</taskItem>
					</view>
				</view>
			</scrollList>
		</view>
		<tabbar :tabIndex="1" :isFixed="false"></tabbar>
		<customShowModal ref="customShowModal" @confirm="confirmOption"></customShowModal>
		<screenModal ref="screenModal" @setScreenForm="setScreenForm"></screenModal>
	</view>
</template>
<script>
	import {
		getTaskList,
		confirmOrderReceipt,
		startDeparture,
		terminateTask
	} from "@/api/task.js"
	import taskItem from "@/components/pageLayout/listItem/task-item.vue"
	import tabbar from "@/components/tabbar/index.vue"
	import screenModal from "@/components/pageLayout/screenModal/warehousingScreenModal.vue"
	export default {
		components: {
			taskItem,
			tabbar,
			screenModal
		},
		data() {
			return {
				showSearch: false,
				listParams: {
					pageNum: 1,
					pageSize: 10,
					taskCode: null,
					// startTime:null,
					// endTime:null,
					// taskType:null, //任务类型：0收运订单、1运输订单
					// taskStatus:null, //订单状态,1待接单,2待开始,3进行中4已完成5已取消
				},
				list: [],
				loadComplete: true,
				optionItem: {}
			};
		},
		onPageScroll(e) {

		},
		onReady() {
		},
		onShow() {
			uni.hideTabBar()
			console.log('Vue.prototype.$status',uni.getStorageSync('status'));
			this.listParams.taskStatus = uni.getStorageSync('status')
			this.switchSearch(false)
			this.listParams.taskCode = ''
			this.listParams.pageNum = 1
			this.getList()
		},
		onLoad(option) {

		},
		onHide() {
			uni.setStorageSync('status', '');
		},
		onUnload(){
			
		},
		methods: {
			switchSearch(value) {
				this.showSearch = value
			},
			changeTab(e) {
				this.tabIndex = e.index
				this.searchList()
			},
			searchList(){
				this.listParams.pageNum = 1
				this.getList()
			},
			searchClear(){
				this.listParams.taskCode = ''
				this.listParams.pageNum = 1
				this.getList()
			},
			/*打开筛选框*/
			showScreenModal() {
				this.$refs.screenModal.showModal();
			},
			/*设置筛选条件*/
			setScreenForm(form) {
				this.listParams = {
					...this.listParams,
					...form
				}
				this.searchList()
			},
			getList() {
				getTaskList(this.listParams).then((res) => {
					this.$refs.scrollList.pullUpDone(!1)
					if (this.listParams.pageNum == 1) {
						this.list = res.data.records
						this.loadComplete = !0
					} else {
						if (this.list.length == res.data.total) {
							this.$refs.scrollList.pullUpDone(!0)
						} else {
							this.list = [...this.list, ...res.data.records]
						}
					}
				})
			},
			pullUpLoad() {
				this.listParams.pageNum++;
				this.getList();
			},
			goDetail(item) {
				let data = {
					id: item.id,
					destinationAddress: item.destinationAddress,
					destinationName: item.destinationName,
					originAddress: item.originAddress,
					originName: item.originName,
					contact: item.contact,
					contactPhone: item.contactPhone
				}
				this.goLink(`./taskDetail?param=${this.enCodeUrl(data)}`)
			},
			// 订单列表
			toOrderList(item){
				console.log(item);
				this.goLink(`./orderList?taskId=${item.id}&taskType=${item.taskType}`)
			},
			/*提示窗确认操作*/
			confirmOption() {
				if (this.optionItem.optionType == 0) {
					this.receiveOrders()
				} else if (this.optionItem.optionType == 3) {
					this.endOrders()
				}
			},
			/*确认接单提示*/
			receiveOrdersTip(item) {
				this.optionItem = {
					...item,
					optionType: 0
				};
				this.$refs.customShowModal.showModal({
					content: "是否确认接收该任务？",
				})
			},
			/*确认接单*/
			receiveOrders() {
				confirmOrderReceipt({
					taskId: this.optionItem.id
				}).then((res) => {
					this.$refs.customShowModal.closeModal()
					uni.$u.toast('已接单');
					this.searchList()
				})
			},
			/*开始出发*/
			startDepart(item) {
				startDeparture({
					taskId: item.id
				}).then((res) => {
					this.searchList()
				})
			},
			
			
			/*终止任务提示*/
			endOrdersTip(item) {
				this.optionItem = {
					...item,
					optionType: 3
				};
				this.$refs.customShowModal.showModal({
					content: "是否确认终止该任务？",
				})
			},
			/*确认终止*/
			endOrders() {
				terminateTask({
					id: this.optionItem.id
				}).then((res) => {
					this.$refs.customShowModal.closeModal()
					uni.$u.toast('已终止');
					this.searchList()
				})
			},
			/*签到*/
			signIn(item) {
				this.goLink(`./signIn?taskId=${item.id}&taskNumber=${item.taskNumber}`)
			},
			/*提交回执单*/
			submitReceipt(item) {
				this.goLink(`./submitReceipt?taskId=${item.id}&taskNumber=${item.taskNumber}`)
			}
		},
	};
</script>
<style lang="scss" scoped>
	.page-content {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.search-block {
			padding: 32rpx;
			background: #f7f7f7;

			.search-input {
				height: 58rpx;
				background: #FFFFFF;
				border-radius: 50rpx;
				font-size: 28rpx;
				color: #CCCCCC;
				padding: 0 20rpx;
			}

			.screen-icon {
				width: 50rpx;
				height: 50rpx;
				margin-left: 24rpx;
			}
		}

		&-main {
			position: relative;
			flex: 1;
			overflow: hidden;

			.list-block {
				padding: 0 32rpx;
			}

		}
	}
</style>